<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>携程</title>
    <link rel="stylesheet" href="./css/base.css">
    <link rel="stylesheet" href="./css/index.css">
    <link rel="stylesheet" href="./iconfont/iconfont.css">
    <link rel="stylesheet" href="./font_3173tosj0b1/iconfont.css">
    <link rel="stylesheet" href="./font_f0wfbhcw56s/iconfont.css">
</head>
<body>


    <div class="main-viewport">
        <!-- 顶部搜索 -->
        <div class="top-search">
            <span class="iconfont icon-search"></span>
            <input type="text" placeholder="搜索:目的地/酒店/景点/航班号">
        </div>
        <!-- 主体1--服务--酒店、机票... -->
        <div class="body1">
            <ul>
                <li><a href=""><img src="./img/1.png" alt="" width="28px">
                    <p>酒店</p></a></li>
                <li><a href=""><img src="./img/2.png" alt="" width="28px">
                    <p>民宿/客栈</p></a></li>
                <li><a href=""><img src="./img/3.png" alt="" width="28px">
                    <p>美食</p></a></li>
            </ul>

             <ul>
                 <li><a href=""><img src="./img/4.png" alt="" width="28px">
                    <p>机票</p></a></li>
                <li><a href=""><img src="./img/5.png" alt="" width="28px">
                    <p>航班助手</p></a></li>
                <li><a href=""><img src="./img/6.png" alt="" width="28px">
                    <p>接送机/包车</p></a></li>
            </ul>

             <ul>
                <li><a href=""><img src="./img/7.png" alt="" width="28px">
                    <p>火车票</p></a></li>
                <li><a href=""><img src="./img/8.png" alt="" width="28px">
                    <p>汽车/船票</p></a></li>
                <li><a href=""><img src="./img/9.png" alt="" width="28px">
                    <p>租车</p></a></li>
            </ul>

             <ul>
                <li><a href=""><img src="./img/10.png" alt="" width="28px">
                    <p>旅游</p></a></li>
                <li><a href=""><img src="./img/11.png" alt="" width="28px">
                    <p>门票/活动</p></a></li>
                <li><a href=""><img src="./img/12.png" alt="" width="28px">
                    <p>周边游</p></a></li>
            </ul>

             <ul>
                <li><a href=""><img src="./img/13.png" alt="" width="28px">
                    <p>攻略/景点</p></a></li>
                <li><a href=""><img src="./img/14.png" alt="" width="28px">
                    <p>购物/免税</p></a></li>
                <li><a href=""><img src="./img/15.png" alt="" width="28px">
                    <p>借钱/分期</p></a></li>
            </ul>
        </div>
        <!-- 主体2--服务下方滑动 -->
         <div class="huadong">
            <span></span>
            <span></span>
         </div>
         <!-- 主体3--广告 -->
          <div class="ad">
            <div class="banner1 pu">
                <a href=""><img src="./img/t1.png" alt="" width="73px" height="20px">
                    <span>特价好货直播中</span>
                </a>
                <!-- 轮播图 -->
                <div class="tupian">
                   <a href=""><img src="./img/c1.jpg" alt=""></a>
                   <div class="hua">
                    <span></span>
                    <span></span>
                    <span></span>
                   </div>
                    <div class="tag">酒店套餐</div>
                </div>
           
                <!-- 左侧广告价钱 -->
                 <div class="price">
                        <span><em>¥1799</em></span>
                    </div>
            </div>
            <div class="banner2 pu">
                 <a href=""><img src="./img/t2.png" alt="" width="73px" height="20px">
                    <span>权威排行榜</span>
                </a>
                <div class="tupian">
                    <a href=""><img src="./img/p1.jpg" alt=""></a>
                    <a href=""><img src="./img/p3.jpg" alt=""></a>
                    <div class="tag">上海</div>
                    <div class="tag">上海</div>

                </div>
                <!-- 右侧图片底部文字 -->
                  <div class="wenzi">
                        <span>奢华酒店榜</span>
                        <span>亲子乐园酒店榜</span>
                    </div>
            </div>
          </div>

          <!-- 主体4--通栏广告 -->
           <div class="big-ad">     
            <img src="./img/b1.jpg" alt="" >
         </div>
<!-- 主体4 -->
         <div class="anniu">
            <a href="">
                <span class="iconfont icon-dianhuatianchong"></span>
                <span>电话预定</span>
            </a>
            <a href="">
                <span class="iconfont icon-xiazai"></span>
                <span>下载教程</span>
            </a>
         </div>

         <div class="map-pc">
              <a href=""><span>网站地图</span></a>
              <div class="line"></div>
            <a href=""><span>电脑版</span></a>
         </div>
         <div class="publish">
            

         </div>

         <!-- 主体5底部导航-->
          <div class="foot-nav">
            <a href="">
                <p class="iconfont icon-shouye1"></p>
                <p>首页</p>
            </a>
             <a href="./shequ.html">
                <p class="iconfont icon-shequ-weijihuo"></p>
                <p>社区</p>
            </a>
             <a href="">
                <p class="iconfont icon-xiaoxi"></p>
                <p>消息</p>
            </a>
             <a href="">
                <p class="iconfont icon-wode"></p>
                <p>我的</p>
            </a>

          </div>


    </div>
</body>
</html>